<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <input type="text">
  <button>搜索</button>

  <script>

    var inputEl = document.querySelector("input")
    var btnEl = document.querySelector("button")
    // down事件先发生；
    // press发生在文本被输入；
    // up发生在文本输入完成；
    // 通过key和code来区分按下的键：
    // code：“按键代码”（"KeyA"，"ArrowLeft" 等），特定于键盘上按键的物理位置。
    // key：字符（"A"，"a" 等），对于非字符（non-character）的按键，通常具有与 code 相同的值。）

    inputEl.onkeydown = function() {
      console.log("onkeydown")
    }
    inputEl.onkeypress = function() {
      console.log("onkeypress")
    }
    inputEl.onkeyup = function(event) {
      console.log("onkeyup")
      console.log(event.key, event.code)
    }

    // 1.搜索功能
    // btnEl.onclick = function() {
    //   console.log("进行搜索功能", inputEl.value)
    // }

    // inputEl.onkeyup = function(event) {
    //   if (event.code === "Enter") {
    //     console.log("进行搜索功能", inputEl.value)
    //   }
    // }

    // // 2.按下s的时候, 搜索自动获取焦点
    // document.onkeyup = function(event) {
    //   if (event.code === "KeyS") {
    //     inputEl.focus()
    //   }
    // }

  </script>

</body>
</html>